<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿W3C</title>
    <link rel="stylesheet" href="../www/CSS/common.css">
    <link rel="stylesheet" href="../www/CSS/ww.css">
    <link rel="stylesheet" href="../www/js/">
</head>
<!-- 笔记  -->
<!-- 
   行内元素：span,i,b,a,br,input,img  块内元素div,hr,table,ol,ul,p,h-123456
   表格   tr行    td列    th表头  caption表格标题    
   表单   form表单 input输入域 textarea文本域 select下拉选项列表 option下拉列表选项 button按钮
   列表   ul无序列表 ol有序列表 li列表项 dl定义列表 dt自定义列表项
   URL   第一资源定位器
-->

<body>
<!-- head -->
<div id="header">
   <div class="clearfix index-container">
      <!-- logo -->
      <div class="fl h-logo">
         <a class="img" href="//www.w3cschool.cn" title="w3cschool">
         <img  class="www-logo" src="../www/images/logo.png" alt="w3cschool" width="214" height="50">
         </a>
      </div>
      <!-- 登录/注册 -->
      <div class="fr h-right">
         <div class="fl mobile">
            <a class="link" href="#" target="_blank" title="App下载">
               <i class="i-icon i-icon-mobile"></i>App下载
            </a>
         </div>

         <div class="fl sig-box">
            <div>
               <a class="link" href="#">注册</a>
               <span class="sep">|</span>
               <a class="link" href="#">登录</a>
            </div>
         </div>
      </div>
      <!-- 站内搜索 -->
      <div class="h-search">
         <form class="search-box" action="/search" method="GET">
            <input class="fl input" type="text" name="w" placeholder="在1000+高质量的免费教程&开发文档中搜索你需要的...">
            <button class="fr submit" type="submit"><i class="i-icon i-icon-search"></i></button>
         </form>
      </div>
   </div>
</div>
<!-- 导航菜单 -->
<div id="nav">
   <div class="index-container">
      <ul class="clearfix nav-menu">
         <li class="nav-menu-item"><a href="#" title="编程入门教程">编程入门教程</a></li>
         <li class="nav-menu-item"><a href="#" title="编程课程">编程课程</a></li>
         <li class="nav-menu-item"><a href="#" title="编程实战">编程实战</a></li>
         <li class="nav-menu-item"><a href="#" title="编程题库">编程题库</a></li>
         <li class="nav-menu-item"><a href="#" target="_blank" title="w3cschool在线工具集">在线工具</a></li>
         <li class="nav-menu-item"><a href="#" title="VIP会员">VIP会员</a></li>
      </ul>
   </div>
</div>
<!-- mian -->
<div id="main" style="background-color:deepskyblue;">
   <div class="index-container">
      <!-- 侧边导航 -->
      <div class="sider-nav">
         <h2 class="sider-nav-title"><i class="i-icon">></i>编程课程分类</h2>
         <ul class="sider-nav-catalog">
            <!-- 分类 7 -->
            <li class="catalog-item">
               <!-- 利用display属性 none--》block/// ::hover  -->
               <a class="title" href="#"><span>新上好课</span><i class="i-icon i-icon-next">></i></a>
               <div class="children">
                  <div class="children-list">
                     <div class="clearfix children-list-head">
                     <h3 class="fl children-list-head-title">新上好课</h3>
                     <a class="fr children-list-head-more" href="#">更多&nbsp;&raquo;</a>
                     </div>
                     <!-- 子导航分类 同下 -->
                     <ul class="clearfix children-list-content">
                        <li class="course">
                        <a href="#" title="移动端web开发(H5+C3+响应式)" target="_blank">
                        <img class="course-cover" src="../www/images/ll.png" alt="移动端web开发(H5+C3+响应式)" width="150" height="84">
                        <div class="single-ellipsis course-title">移动端web开发(H5+C3+响应式)</div>
                        </a>
                        </li>
                        <li class="course">
                        <a href="#" title="web前端基础" target="_blank">
                        <img class="course-cover" src="../www/images/ll.png" alt="web前端基础实战-小米商城" width="150" height="84">
                        <div class="single-ellipsis course-title">web前端基础</div>
                        </a>
                        </li>
                        <li class="course">
                        <a href="#" title="Vue核心技术" target="_blank">
                        <img class="course-cover" src="../www/images/ll.png" alt="Vue核心技术实战精讲" width="150" height="84">
                        <div class="single-ellipsis course-title">Vue核心技术</div>
                        </a>
                        </li>
                        <li class="course">
                        <a href="#" title="web前端基础" target="_blank">
                        <img class="course-cover" src="../www/images/ll.png" alt="web前端基础实战-小米商城" width="150" height="84">
                        <div class="single-ellipsis course-title">web前端基础</div>
                        </a>
                        </li>
                        <li class="course">
                        <a href="#" title="Vue核心技术" target="_blank">
                        <img class="course-cover" src="../www/images/ll.png" alt="Vue核心技术实战精讲" width="150" height="84">
                        <div class="single-ellipsis course-title">Vue核心技术</div>
                        </a>
                        </li>
                     </ul>
                  </div>
                  <div class="children-list">
                     <div class="clearfix children-list-head">
                        <h3 class="fl children-list-head-title">热门推荐</h3>
                        <a class="fr children-list-head-more" href="#" target="_blank">更多&nbsp;&raquo;</a>
                     </div>
                     <ul class="clearfix children-list-content">
                        <li class="course">
                        <a href="#" title="微信小程序微课" target="_blank">
                        <img class="course-cover" src="../www/images/ll.png" alt="微信小程序微课" width="150" height="84">
                        <div class="single-ellipsis course-title">微信小程序微课</div>
                        </a>
                        </li>
                     </ul>
                  </div>
               </div>
            </li>
            <li class="catalog-item">
               <a class="title" href="#"><span>前端开发</span><i class="i-icon i-icon-next">></i></a>
               <div class="children">
                  <div class="children-list">
                     <div class="clearfix children-list-head">
                     <h3 class="fl children-list-head-title">前端开发初级课程</h3>
                     <a class="fr children-list-head-more" href="/group/frontend.html" target="_blank">学习路径&nbsp;&raquo;</a>
                     </div>
                     <ul class="clearfix children-list-content">
                        <li class="course">
                        <a href="https://www.w3cschool.cn/htmlcourse/" title="HTML微课(含HTML5)" target="_blank">
                        <img class="course-cover" src="../www/images/ll.png" alt="HTML微课(含HTML5)" width="150" height="84">
                        <div class="single-ellipsis course-title">HTML微课(含HTML5)</div>
                        </a>
                        </li>
                        <li class="course">
                        <a href="https://www.w3cschool.cn/csscourse/" title="CSS微课" target="_blank">
                        <img class="course-cover" src="../www/images/ll.png" alt="CSS微课" width="150" height="84">
                        <div class="single-ellipsis course-title">CSS微课</div>
                        </a>
                        </li>
                        <li class="course">
                        <a href="https://www.w3cschool.cn/jscourse/" title="JavaScript微课" target="_blank">
                        <img class="course-cover" src="../www/images/ll.png" alt="JavaScript微课" width="150" height="84">
                        <div class="single-ellipsis course-title">JavaScript微课</div>
                        </a>
                        </li>
                        <li class="course">
                        <a href="https://www.w3cschool.cn/html5_job_my/" title="HTML5基础入门" target="_blank">
                        <img class="course-cover" src="../www/images/ll.png" alt="HTML5基础入门" width="150" height="84">
                        <div class="single-ellipsis course-title">HTML5基础入门</div>
                        </a>
                        </li>
                     </ul>

                  </div>
                  <div class="children-list">
                     <div class="clearfix children-list-head">
                        <h3 class="fl children-list-head-title">前端开发中级课程</h3>
                     </div>
                     <ul class="clearfix children-list-content">
                        <li class="course">
                        <a href="https://www.w3cschool.cn/jquerycourse/" title="jQuery微课" target="_blank">
                        <img class="course-cover" src="../www/images/ll.png" alt="jQuery微课" width="150" height="84">
                        <div class="single-ellipsis course-title">jQuery微课</div>
                        </a>
                        </li>
                        <li class="course">
                        <a href="https://www.w3cschool.cn/wxadoccourse/" title="微信小程序微课" target="_blank">
                        <img class="course-cover" src="../www/images/ll.png" alt="微信小程序微课" width="150" height="84">
                        <div class="single-ellipsis course-title">微信小程序微课</div>
                        </a>
                        </li>
                        <li class="course">
                        <a href="https://www.w3cschool.cn/jquery_camp/" title="jQuery实战" target="_blank">
                        <img class="course-cover" src="../www/images/ll.png" alt="jQuery实战" width="150" height="84">
                        <div class="single-ellipsis course-title">jQuery实战</div>
                        </a>
                        </li>
                        <li class="course">
                        <a href="https://www.w3cschool.cn/responsive_design_with_bootstrap_camp/" title="Bootstrap实战" target="_blank">
                        <img class="course-cover" src="../www/images/ll.png" alt="Bootstrap实战" width="150" height="84">
                        <div class="single-ellipsis course-title">Bootstrap实战</div>
                        </a>
                        </li>
                     </ul>
                  </div>
                  <div class="children-list">
                     <div class="clearfix children-list-head">
                        <h3 class="fl children-list-head-title">前端高级及应用课程</h3>
                     </div>
                     <ul class="clearfix children-list-content">
                        <li class="course">
                        <a href="https://www.w3cschool.cn/vuecourse/" title="Vue 2.x 微课" target="_blank">
                        <img class="course-cover" src="../www/images/ll.png" alt="Vue 2.x 微课" width="150" height="84">
                        <div class="single-ellipsis course-title">Vue 2.0微课</div>
                        </a>
                        </li>
                        <li class="course">
                        <a href="https://www.w3cschool.cn/orbls/" title="Node.js微课" target="_blank">
                        <img class="course-cover" src="../www/images/ll.png" alt="Node.js微课" width="150" height="84">
                        <div class="single-ellipsis course-title">Node.js微课</div>
                        </a>
                        </li>
                        <li class="course">
                        <a href="https://www.w3cschool.cn/puybn/" title="React微课" target="_blank">
                        <img class="course-cover" src="../www/images/ll.png" alt="React微课" width="150" height="84">
                        <div class="single-ellipsis course-title">React微课</div>
                        </a>
                        </li>
                        <li class="course">
                        <a href="https://www.w3cschool.cn/ecmascript6/" title="ES6 微课" target="_blank">
                        <img class="course-cover" src="../www/images/ll.png" alt="ES6 微课" width="150" height="84">
                        <div class="single-ellipsis course-title">ES6 微课</div>
                        </a>
                        </li>
                     </ul>
                  </div>
               </div>
            </li>
            <li class="catalog-item">
               <a class="title" href="#"><span>Python系列</span><i class="i-icon i-icon-next">></i></a>
               <div class="children">
                  <div class="children-list">
                     <div class="clearfix children-list-head">
                        <h3 class="fl children-list-head-title">Python微课类课程</h3>
                        <a class="fr children-list-head-more" href="/group/pythoner.html" target="_blank">学习路径&nbsp;&raquo;</a>
                     </div>
                     <ul class="clearfix children-list-content">
                        <li class="course">
                        <a href="https://www.w3cschool.cn/pythonhigh/" title="Python3 进阶" target="_blank">
                        <img class="course-cover" src="../www/images/ll.png" alt="Python3 进阶" width="150" height="84">
                        <div class="single-ellipsis course-title">Python3 进阶</div>
                        </a>
                        </li>
                        <li class="course">
                        <a href="https://www.w3cschool.cn/pythonspiderbase/" title="Python 静态爬虫" target="_blank">
                        <img class="course-cover" src="../www/images/ll.png" alt="Python 静态爬虫" width="150" height="84">
                        <div class="single-ellipsis course-title">Python 静态爬虫</div>
                        </a>
                        </li>
                     </ul>
                  </div>
                  <div class="children-list">
                     <div class="clearfix children-list-head">
                        <h3 class="fl children-list-head-title">Python视频类课程</h3>
                     </div>
                     <ul class="clearfix children-list-content">
                        <li class="course">
                        <a href="https://www.w3cschool.cn/python1_txy/" title="Python爬虫技术入门指南" target="_blank">
                        <img class="course-cover" src="../www/images/ll.png" alt="Python爬虫技术入门指南" width="150" height="84">
                        <div class="single-ellipsis course-title">Python爬虫技术入门指南</div>
                        </a>
                        </li>
                     </ul>
                  </div>
               </div>
            </li>
            <li class="catalog-item">
               <a class="title" href="#"><span>Java系列</span><i class="i-icon i-icon-next">></i></a>
               <div class="children">
                  <div class="children-list">
                     <div class="clearfix children-list-head">
                        <h3 class="fl children-list-head-title">Java初级</h3>
                        <a class="fr children-list-head-more" href="/group/javaer.html" target="_blank">学习路径&nbsp;&raquo;</a>
                     </div>
                     <ul class="clearfix children-list-content">
                        <li class="course">
                        <a href="https://www.w3cschool.cn/javaminicourse/" title="Java微课" target="_blank">
                        <img class="course-cover" src="../www/images/ll.png" alt="Java微课" width="150" height="84">
                        <div class="single-ellipsis course-title">Java微课</div>
                        </a>
                        </li>
                        <li class="course">
                        <a href="https://www.w3cschool.cn/androidcourse/" title="Android 零基础入门微课" target="_blank">
                        <img class="course-cover" src="../www/images/ll.png" alt="Android 零基础入门微课" width="150" height="84">
                        <div class="single-ellipsis course-title">Android 零基础入门微课</div>
                        </a>
                        </li>
                     </ul>
                  </div>
                  <div class="children-list">
                     <div class="clearfix children-list-head">
                        <h3 class="fl children-list-head-title">Java进阶</h3>
                     </div>
                     <ul class="clearfix children-list-content">
                        <li class="course">
                        <a href="https://www.w3cschool.cn/springboot_my/" title="SpringBoot从入门到精通" target="_blank">
                        <img class="course-cover" src="../www/images/ll.png" alt="SpringBoot从入门到精通" width="150" height="84">
                        <div class="single-ellipsis course-title">SpringBoot从入门到精通</div>
                        </a>
                        </li>
                     </ul>
                  </div>
               </div>
            </li>
            <li class="catalog-item">
               <a class="title" href="#"><span>后端开发</span><i class="i-icon i-icon-next">></i></a>
               <div class="children">
                  <div class="children-list">
                     <div class="clearfix children-list-head">
                        <h3 class="fl children-list-head-title">后端开发课程</h3>
                        <a class="fr children-list-head-more" href="../www/images/ll.png" target="_blank">学习路径&nbsp;&raquo;</a>
                     </div>
                     <ul class="clearfix children-list-content">
                        <li class="course">
                        <a href="https://www.w3cschool.cn/cprogramming_my/" title="从零开始学C语言" target="_blank">
                        <img class="course-cover" src="../www/images/ll.png" alt="从零开始学C语言" width="150" height="84">
                        <div class="single-ellipsis course-title">从零开始学C语言</div>
                        </a>
                        </li>
                     </ul>
                  </div>
               </div> 
            </li>
            <li class="catalog-item">
               <a class="title" href="#"><span>编程基础与数据库</span><i class="i-icon i-icon-next">></i></a>
               <div class="children">
                  <div class="children-list">
                     <div class="clearfix children-list-head">
                        <h3 class="fl children-list-head-title">数据库课程</h3>
                        <a class="fr children-list-head-more" href="../www/images/ll.png" target="_blank">学习路径&nbsp;&raquo;</a>
                     </div>
                     <ul class="clearfix children-list-content">
                        <li class="course">
                        <a href="https://www.w3cschool.cn/mysqlcourse/" title="MySQL 微课" target="_blank">
                        <img class="course-cover" src="../www/images/ll.png" alt="MySQL 微课" width="150" height="84">
                        <div class="single-ellipsis course-title">MySQL 微课</div>
                        </a>
                        </li>
                        <li class="course">
                        <a href="https://www.w3cschool.cn/sqlservervideo/" title="SQLServer基础入门" target="_blank">
                        <img class="course-cover" src="../www/images/ll.png" alt="SQLServer基础入门" width="150" height="84">
                        <div class="single-ellipsis course-title">SQLServer基础入门</div>
                        </a>
                        </li>
                     </ul>
                  </div>
                  <div class="children-list">
                     <div class="clearfix children-list-head">
                        <h3 class="fl children-list-head-title">编程基础课程</h3>
                     </div>
                     <ul class="clearfix children-list-content">
                        <li class="course">
                        <a href="https://www.w3cschool.cn/regular_expressions_camp/" title="正则表达式" target="_blank">
                        <img class="course-cover" src="../www/images/ll.png" alt="正则表达式" width="150" height="84">
                        <div class="single-ellipsis course-title">正则表达式</div>
                        </a>
                        </li>
                        <li class="course">
                        <a href="https://www.w3cschool.cn/linux_my/" title="Linux极速入门" target="_blank">
                        <img class="course-cover" src="../www/images/ll.png" alt="Linux极速入门" width="150" height="84">
                        <div class="single-ellipsis course-title">Linux极速入门</div>
                        </a>
                        </li>
                     </ul>
                  </div>
               </div>
            </li>
            <li class="catalog-item">
               <a class="title" href="#"><span>其它课程</span><i class="i-icon i-icon-next">></i></a>
               <div class="children">
                  <div class="children-list">
                     <div class="clearfix children-list-head">
                        <h3 class="fl children-list-head-title">其它课程</h3>
                        <a class="fr children-list-head-more" href="#" target="_blank">学习路径&nbsp;&raquo;</a>
                     </div>
                     <ul class="clearfix children-list-content">
                        <li class="course">
                        <a href="https://www.w3cschool.cn/svn_my/" title="1小时快速上手版本控制器-SVN精讲视频教程" target="_blank">
                        <img class="course-cover" src="../www/images/ll.png" alt="1小时快速上手版本控制器-SVN精讲视频教程" width="150" height="84">
                        <div class="single-ellipsis course-title">1小时快速上手版本控制器</div>
                        </a>
                        </li>
                     </ul>
                  </div>
               </div>
            </li>
         </ul>
      </div>
      <!-- 图片课程 -->
      <div class="fl banner carousel">
         <!-- 轮播图 -->
         <div class="carousel-wrapper">
            <div class="carousel-slide" data-bgcolor="#3c3a38">
               <a href="#" target="_blank" stat="sslink-1">
               <img src="../www/images/download-1.png" alt="2019年10月新版VIP会员宣传图" width="100%" height="100%">
               </a>
            </div>
            <div class="carousel-slide" data-bgcolor="#6b56cc">
               <a href="#" target="_blank" stat="sslink-1">
               <img src="../www/images/download-2.png" alt="APIcloud合作广告20200804" width="100%" height="100%">
               </a>
            </div>
            <div class="carousel-slide" data-bgcolor="#2058fd">
               <a href="#" target="_blank" stat="sslink-1">
               <img src="../www/images/download-3.png" alt="Python3进阶微课升级webbanner" width="100%" height="100%">
               </a>
            </div>
            <div class="carousel-slide" data-bgcolor="#6262cf">
                  <a href="#" target="_blank" stat="sslink-1">
                  <img src="../www/images/download-4.png" alt="王亮亮php课程包上新web-banner" width="100%" height="100%">
                  </a>
            </div>
         </div>
         <!-- 图片 圆点空心标记 5 -->
         <div class="carousel-pagination">
            <div class="carousel-pagination-bullets">
               <span class="carousel-pagination-bullet cur"></span>
               <span class="carousel-pagination-bullet "></span>
               <span class="carousel-pagination-bullet "></span>
               <span class="carousel-pagination-bullet "></span>
               <span class="carousel-pagination-bullet "></span>
            </div>
         </div>
         <!-- 图片点击下一张 -->
         <div class="carousel-button-prev"><img src="../www/images/l-t.png" alt="上一张" width="26" height="50"></div>
         <div class="carousel-button-next"><img src="../www/images/r-t.png" alt="下一张" width="26" height="50"></div>
      </div>
      <!-- 快速登录 -->
      <div class="fl quick-login">
         <div class="quick-login-not">
            <h4 class="login-title">快速登录</h4>
            <div class="login-form">
               <form id="loginform" action="/checklogin" method="post">
                  <input type="hidden" name="refer" value="">
                  <div class="form-item">
                     <span class="input-prefix"><img class="i-icon i-icon-my"></span>
                     <input class="input" id="username" type="text" name="username" placeholder="学号/手机/邮箱" autofocus autocomplete="off">
                  </div>
                  <div class="form-item">
                     <span class="input-prefix"><img class="i-icon i-icon-locked"></span>
                     <input class="input" id="password" type="password" name="password" placeholder="登录密码" autocomplete="off">
                  </div>
                  <div class="text-justify form-item" id="scode-form-item">
                     <span class="input-prefix"><img class="i-icon i-icon-locked"></span>
                     <input id="scode" name="scode" class="input" placeholder="验证码">
                     <div class="scode-box"><img src="/scode" alt="点击修改验证码" height="32" title="点击刷新验证码" onclick="change_scode()" id="scode-img">验证码</div>
                  </div>
                  <div class="clearfix form-item" id="check-form-item">
                     <div class="fl">
                        <input class="checkbox" type="checkbox" name="remember" value="1" checked><span>保持登录状态</span>
                     </div>
                     <a class="fr" href="#" rel="nofollow">忘记密码？</a>
                  </div>

                  <div class="form-item">
                     <button class="form-button" type="button" onClick="DoSubmit();">立即登录</button>
                  </div>
               </form>
            </div>
            <!-- 快捷登录方式 -->
            <div class="login-sns">
               <div class="clearfix login-sns-row">
                  <a class="fl sns-wechat" href="javascript:;" rel="nofollow" onclick="wechatqr();"><img class="i-icon i-icon-wechat-circle"></img>微信登录</a>
                  <a class="fr sns-qq" href="/auth" rel="nofollow"><img class="i-icon i-icon-qq-circle"></img><span>QQ</span>登录</a>
               </div>
               <div class="clearfix login-sns-row">
                  <a class="fl sns-github" href="/auth?platform=github" rel="nofollow"><i class="i-icon i-icon-github-circle"></i>Github登录</a>
                  <a class="fr regist login-sns-zc" href="/register" rel="nofollow"><i class="i-icon i-icon-adduser-circle"></i>注册账号</a>
                  </div>
            </div>
         </div>
      </div>
   </div>
</div>


<!-- 通知 可添加通知消息 更新教程信息 -->
<div class="index-container">
   <div class="headlines">
      <em class="fl headlines-icon"><i class="i-icon i-icon-horn"></i></em>
      <a class="fr headlines-more" href="#" target="_blank" title="查看更多"><i class="i-icon i-icon-more"></i></a>
      <ul class="headlines-list">
         <li>
         <span class="fr headlines-time">09-15</span>
         <div class="single-ellipsis headlines-content">
         <a href="#" target="_blank" title="想在手机上学编程？快下编程狮App">想在手机上学编程？快下编程狮App</a>
         </div>
         </li>
         <li>
         <span class="fr headlines-time">09-07</span>
         <div class="single-ellipsis headlines-content">
         <a href="#" target="_blank" title="do-while，Java中容易被忽略的语句">do-while，Java中容易被忽略的语句</a>
         </div>
         </li>
      </ul>
   </div>
</div>

<div class="index-container">
   <!-- 图片基础入门 -->
   <div class="layer spread-layer">
      <div class="layer-content">
         <p>
            <a href="#" target="_blank">
               <img src="../www/images/download-7.png" alt="前端开发零基础" />
            </a>
            <a href="#" target="_blank">
               <img src="../www/images/download-8.png" alt="Python零基础" />
            </a>
            <a href="#" target="_blank">
               <img src="../www/images/download-7.png" alt="Java零基础" />
            </a>
            <a href="#" target="_blank">
               <img src="../www/images/download-8.png" alt="Python" />
            </a>
         </p>
      </div>
   </div>
   <!-- 教程分类 -->
   <div class="layer tutorial-layer">
      <h2 class="layer-title"><span>极客教程</span><span class="layer-sbtuitle">免费的在线教程&技术文档</span></h2>
      <div class="layer-content tutorial-tabs">
         <div class="tabs-nav-wrap">
            <div class="index-container">
               <ul class="clearfix tabs-nav">
                  <li class="fl tabs-tab on abc" data-key="-1">全部</li>
                  <li class="fl tabs-tab" data-key="653">热门教程</li>
                  <li class="fl tabs-tab" data-key="94">HTML/CSS</li>
                  <li class="fl tabs-tab" data-key="95">JavaScript</li>
                  <li class="fl tabs-tab" data-key="96">后端语言</li>
                  <li class="fl tabs-tab" data-key="115">开发框架</li>
                  <li class="fl tabs-tab" data-key="97">数据库</li>
                  <li class="fl tabs-tab" data-key="98">移动开发</li>
                  <li class="fl tabs-tab" data-key="101">服务器相关</li>
                  <li class="fl tabs-tab" data-key="102">开发工具</li>
                  <li class="fl tabs-tab" data-key="116">大数据</li>
                  <li class="fl tabs-tab" data-key="103">网站建设</li>
                  <li class="fl tabs-tab" data-key="99">XML教程</li>
               </ul>
            </div>
         </div>
         <!-- 教程课程 -->
         <div class="tabs-panel">
            <div class="tutorial-project" data-key="653">
               <h3 class="project-name">热门教程</h3>
               <ul class="clearfix project-list">
                     <li class="fl project-list-item-wrap">
                        <a class="clearfix project-list-item" href="#" title="Vue.js 2.0 教程">
                        <div class="fl cover">
                        <img src="../www/images/c.png" alt="Vue.js 2.0 教程" width="64" height="64">
                        </div>
                        <div class=" info">
                        <h4 class="single-ellipsis info-title">Vue.js 2.0 教程</h4>
                        <p class="double-ellipsis info-des">Vue.js 2.0 版本，是目前主流的版本。</p>
                        </div>
                        </a>
                     </li>
                     <li class="fl project-list-item-wrap">
                     <a class="clearfix project-list-item" href="#" title="HTML 教程">
                     <div class="fl cover">
                     <img src="../www/images/c.png" alt="HTML 教程" width="64" height="64">
                     </div>
                     <div class="info">
                     <h4 class="single-ellipsis info-title">HTML 教程</h4>
                     <p class="double-ellipsis info-des">HTML 指超文本标签语言。
                     HTML 是通向 WEB 技术世界...</p>
                     </div>
                     </a>
                     </li>
                     <li class="fl project-list-item-wrap">
                     <a class="clearfix project-list-item" href="#" title="微信小程序开发文档">
                     <div class="fl cover">
                     <img src="../www/images/c.png" alt="微信小程序开发文档" width="64" height="64">
                     </div>
                     <div class="info">
                     <h4 class="single-ellipsis info-title">微信小程序开发文档</h4>
                     <p class="double-ellipsis info-des">微信小程序开发文档，主要介绍了微信小程序的开发教程，微信小程序的a...</p>
                     </div>
                     </a>
                     </li>
                     <li class="fl project-list-item-wrap">
                     <a class="clearfix project-list-item" href="#" title="JavaScript 教程">
                     <div class="fl cover">
                     <img src="../www/images/c.png" alt="JavaScript 教程" width="64" height="64">
                     </div>
                     <div class="info">
                     <h4 class="single-ellipsis info-title">JavaScript 教程</h4>
                     <p class="double-ellipsis info-des">JavaScript 是世界上最流行的脚本语言。
                     JavaScr...</p>
                     </div>
                     </a>
                     </li>
                     <li class="fl project-list-item-wrap">
                     <a class="clearfix project-list-item" href="#" title="CSS 教程">
                     <div class="fl cover">
                     <img src="../www/images/c.png" alt="CSS 教程" width="64" height="64">
                     </div>
                     <div class="info">
                     <h4 class="single-ellipsis info-title">CSS 教程</h4>
                     <p class="double-ellipsis info-des">CSS 指层叠样式表（Cascading Style Sheets...</p>
                     </div>
                     </a>
                     </li>
                     <li class="fl project-list-item-wrap">
                     <a class="clearfix project-list-item" href="#" title="jQuery 教程">
                     <div class="fl cover">
                     <img src="../www/images/c.png" alt="jQuery 教程" width="64" height="64">
                     </div>
                     <div class="info">
                     <h4 class="single-ellipsis info-title">jQuery 教程</h4>
                     <p class="double-ellipsis info-des">jQuery 是一个 JavaScript 库。
                     jQuery ...</p>
                     </div>
                     </a>
                     </li>
                     <li class="fl project-list-item-wrap">
                     <a class="clearfix project-list-item" href="#" title="SQL 教程">
                     <div class="fl cover">
                     <img src="../www/images/c.png" alt="SQL 教程" width="64" height="64">
                     </div>
                     <div class="info">
                     <h4 class="single-ellipsis info-title">SQL 教程</h4>
                     <p class="double-ellipsis info-des">SQL 是用于访问和处理数据库的标准的计算机语言。 在本教程中，您...</p>
                     </div>
                     </a>
                     </li>
               </ul>
            </div>

            <div class="tutorial-project" data-key="94">
               <h3 class="project-name">HTML/CSS</h3>
               <ul class="clearfix project-list">
                  <li class="fl project-list-item-wrap">
                  <a class="clearfix project-list-item" href="//www.w3cschool.cn/html/" title="HTML 教程">
                  <div class="fl cover">
                  <img src="../www/images/ll.png" alt="HTML 教程" width="64" height="64">
                  </div>
                  <div class="info">
                  <h4 class="single-ellipsis info-title">HTML 教程</h4>
                  <p class="double-ellipsis info-des">HTML 指超文本标签语言。
                  HTML 是通向 WEB 技术世界...</p>
                  </div>
                  </a>
                  </li>
                  <li class="fl project-list-item-wrap">
                  <a class="clearfix project-list-item" href="//www.w3cschool.cn/html5/" title="HTML5 教程">
                  <div class="fl cover">
                  <img src="../www/images/ll.png" alt="HTML5 教程" width="64" height="64">
                  </div>
                  <div class="info">
                  <h4 class="single-ellipsis info-title">HTML5 教程</h4>
                  <p class="double-ellipsis info-des">HTML 5 是下一代的 HTML。
                  HTML5 仍处于完善之中...</p>
                  </div>
                  </a>
                  </li>
                  <li class="fl project-list-item-wrap">
                  <a class="clearfix project-list-item" href="//www.w3cschool.cn/css/" title="CSS 教程">
                  <div class="fl cover">
                  <img src="../www/images/ll.png" alt="CSS 教程" width="64" height="64">
                  </div>
                  <div class="info">
                  <h4 class="single-ellipsis info-title">CSS 教程</h4>
                  <p class="double-ellipsis info-des">CSS 指层叠样式表（Cascading Style Sheets...</p>
                  </div>
                  </a>
                  </li>
                  <li class="fl project-list-item-wrap">
                  <a class="clearfix project-list-item" href="//www.w3cschool.cn/css3/" title="CSS3 教程">
                  <div class="fl cover">
                  <img src="../www/images/ll.png" alt="CSS3 教程" width="64" height="64">
                  </div>
                  <div class="info">
                  <h4 class="single-ellipsis info-title">CSS3 教程</h4>
                  <p class="double-ellipsis info-des">CSS3 是最新的 CSS 标准。
                  我们的 CSS3 教程向您讲...</p>
                  </div>
                  </a>
                  </li>
                  <li class="fl project-list-item-wrap">
                  <a class="clearfix project-list-item" href="//www.w3cschool.cn/bootstrap/" title="Bootstrap 教程">
                  <div class="fl cover">
                  <img src="../www/images/ll.png" alt="Bootstrap 教程" width="64" height="64">
                  </div>
                  <div class="info">
                  <h4 class="single-ellipsis info-title">Bootstrap 教程</h4>
                  <p class="double-ellipsis info-des">Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。</p>
                  </div>
                  </a>
                  </li>
               </ul>
            </div>

            <div class="tutorial-project" data-key="95">
               <h3 class="project-name">JavaScript</h3>
               <ul class="clearfix project-list">
                  <li class="fl project-list-item-wrap">
                  <a class="clearfix project-list-item" href="//www.w3cschool.cn/javascript/" title="JavaScript 教程">
                  <div class="fl cover">
                  <img src="../www/images/ll.png" alt="JavaScript 教程" width="64" height="64">
                  </div>
                  <div class="info">
                  <h4 class="single-ellipsis info-title">JavaScript 教程</h4>
                  <p class="double-ellipsis info-des">JavaScript 是世界上最流行的脚本语言。
                  JavaScr...</p>
                  </div>
                  </a>
                  </li>
                  <li class="fl project-list-item-wrap">
                  <a class="clearfix project-list-item" href="//www.w3cschool.cn/vue3course/" title="Vue CLI 中文教程">
                  <div class="fl cover">
                  <img src="../www/images/ll.png" alt="Vue CLI 中文教程" width="64" height="64">
                  </div>
                  <div class="info">
                  <h4 class="single-ellipsis info-title">Vue CLI 中文教程</h4>
                  <p class="double-ellipsis info-des">Vue CLI 中文教程</p>
                  </div>
                  </a>
                  </li>
                  <li class="fl project-list-item-wrap">
                  <a class="clearfix project-list-item" href="//www.w3cschool.cn/vuejs2/" title="Vue.js 2.0 教程">
                  <div class="fl cover">
                  <img src="../www/images/ll.png" alt="Vue.js 2.0 教程" width="64" height="64">
                  </div>
                  <div class="info">
                  <h4 class="single-ellipsis info-title">Vue.js 2.0 教程</h4>
                  <p class="double-ellipsis info-des">Vue.js 2.0 版本，是目前主流的版本。</p>
                  </div>
                  </a>
                  </li>
                  <li class="fl project-list-item-wrap">
                  <a class="clearfix project-list-item" href="//www.w3cschool.cn/react/" title="React 教程">
                  <div class="fl cover">
                  <img src="../www/images/ll.png" alt="React 教程" width="64" height="64">
                  </div>
                  <div class="info">
                  <h4 class="single-ellipsis info-title">React 教程</h4>
                  <p class="double-ellipsis info-des">React 是一个用于构建用户界面的 JAVASCRIPT 库。
                  ...</p>
                  </div>
                  </a>
                  </li>
                  <li class="fl project-list-item-wrap">
                  <a class="clearfix project-list-item" href="//www.w3cschool.cn/jquery/" title="jQuery 教程">
                  <div class="fl cover">
                  <img src="../www/images/ll.png" alt="jQuery 教程" width="64" height="64">
                  </div>
                  <div class="info">
                  <h4 class="single-ellipsis info-title">jQuery 教程</h4>
                  <p class="double-ellipsis info-des">jQuery 是一个 JavaScript 库。
                  jQuery ...</p>
                  </div>
                  </a>
                  </li>
                  <li class="fl project-list-item-wrap">
                  <a class="clearfix project-list-item" href="//www.w3cschool.cn/nodejs/" title="Node.js 教程">
                  <div class="fl cover">
                  <img src="../www/images/ll.png" alt="Node.js 教程" width="64" height="64">
                  </div>
                  <div class="info">
                  <h4 class="single-ellipsis info-title">Node.js 教程</h4>
                  <p class="double-ellipsis info-des">Node.js 是运行在服务端的 JavaScript。</p>
                  </div>
                  </a>
                  </li>
               </ul>
            </div>
         </div>
      </div>
   </div>

   <div class="clearfix layer update-layer">
      <h4 class="fl title">最近更新</h4>
      <div class="link-wrap">
         <a class="link" href="#" title="支付宝小程序上线" target="_blank">支付宝小程序上线</a>
         <a class="link" href="#" title="微信小程序上线" target="_blank">微信小程序上线</a>
         <a class="link" href="#" target="_blank">更多&raquo;</a>
      </div>
   </div>

 
   <div class="clearfix layer friendly-layer">
      <h4 class="fl title">友情链接</h4>
      <div class="link-wrap">
         <a class="link" href="https://www.w3cschool.cn/" title="W3C编程狮" target="_blank" >编程狮</a>
         <a class="link" href="http://www.officezhushou.com/" title="office办公软件" target="_blank" >office办公助手</a>
         <a class="link" href="http://www.bejson.com/" title="在线JSON校验格式化工具" target="_blank" >JSON在线工具</a>
         <a class="link" href="http://www.linuxprobe.com" title="Linux系统与红帽RHCE认证自学手册" target="_blank" >Linux教程</a>
         <a class="link" href="http://www.bluestacks.cn/" title="BlueStacks蓝叠安卓模拟器官网" target="_blank" >安卓模拟器</a>
         <a class="link" href="/links" target="_blank">更多&raquo;</a>
      </div>
   </div>
</div>



<div class="widget-body" data-type="index"></div>

<!-- 底部导航 -->
<div id="footer_item">
   <div id="footer">
      <div class="footer-box">
         <div class="footer-title">网站相关</div>
         <ul class="footer-items">
            <li><a href="#">关于我们</a></li>
            <li><a href="#">加入我们</a></li>
            <li><a href="#">网站地图</a></li>
            <li><a target="_blank" href="#">友情链接</a></li>
         </ul>
      </div>
      <div class="footer-box">
         <div class="footer-title">内容专区</div>
         <ul class="footer-items">
            <li><a href="#" title="编程入门教程">编程入门教程</a></li>
            <li><a href="#" title="技术文档参考手册">极客文档</a></li>
            <li><a href="#" title="编程在线工具">在线工具</a></li>
            <li><a href="#" title="文章存档">文章存档</a></li>
         </ul>
      </div>
      <div class="footer-box">
         <div class="footer-title">常用链接</div>
         <ul class="footer-items">
            <li><a href="#" title="技术学习极客导航">极客导航</a></li>
            <li><a href="#" target="_blank" title="编程实战">编程实战</a></li>
            <li><a href="#" target="_blank" title="w3cschool离线版下载">9718离线下载</a></li>
            <li><a href="#" target="_blank" title="w3cschool手机版">9718手机版</a></li>
         </ul>
      </div>

      <div class="footer-box">
         <div class="footer-title">联系我们</div>
         <ul class="footer-items">
            <li><a target="_blank" href="#" title="常见问题QA">常见问题QA</a></li>
            <li><a href="#" target="_blank">课程合作</a></li>
            <li><a target="_blank" href="#" ref="nofollow" target="_blank">官方QQ群：*********</a></li>
            <li><a target="_blank" href="#" ref="nofollow" target="_blank">商务合作QQ：946148865</a></li>
         </ul>
      </div>


      <div class="footer-box">
         <div class="tcode"><img src="../www/images/erweima.jpg" alt="加入App二维码" width="100" height="100"></div>
         <p class="tcode-txt">下载App</p>
      </div>

      <div class="footer-box">
         <div class="tcode">
            <img src="../www/images/erweima.jpg" alt="微信订阅号" width="100" height="100">
         </div>
         <p class="tcode-txt">关注公众号</p>
      </div>
   </div>
   <div class="footer-bottom">
   <p>Copyright&copy;2020&nbsp;
      <a href="# target="_blank" title="w3cschool">9718.com</a>导航网址&nbsp;
      <a href="#" target="_blank" rel="nofollow" class="footer-record">闽ICP备********号-*</a>&nbsp;
      <a href="#" target="_blank" rel="nofollow" style="margin: 0 5px;">
         <i class="beian"></i>闽公网安备**************号
      </a>
   </p>
   </div>
</div>

<!-- 隐藏 display:none -->
<div id="dialogBackground" class="dialogBackground"></div>



<div class="feedback-Box" style="display: none;">
   <div class="feedback-Box-content" style="width: 662px;">
      <div class="feedback-Box-top">
      <span class="feedback-Box-title">意见反馈</span>
      <span onclick="closeDialogBox(this)" class="feedback-Box-close">X</span>
      </div>
      <ul>
         <li class="feedback-box" >
            <div id="feedbackRadio" type="radio" name="feedbackType" data-value="0"> 反馈类型：
            <select id="selecttype">
               <option value="0" >产品建议</option>
               <option value="1" >课程内容</option>
               <option value="2" >bug提交</option>
               <option value="3" >其他问题</option>
            </select>
            </div>
            <textarea  name="reportInfo" id="elmaaa" class="feedback-text" rows="15" placeholder="请留下您宝贵的意见反馈吧。"></textarea>
            <p>联系方式：</p>
            <input type="text" placeholder="留个联系方式呗..." name="reportAddress" class="radio-text" id="reportAddress" style="height: 30px;width: 200px;">
         </li>
      </ul>
      <button class="search-s" onclick="dialogSubmit(this)" id="reportSubmit">提交</button>
   </div>
</div>

<div id="note-start" style="display: none"></div>

<div id="detail" style="display:none;">
   <div id="note-Dialog" class="note-Dialog" >
      <div class="note-Box-content">
         <div class="ntitlebox">
         <input type="text" placeholder="" name="ntitle" class="ntitle" id="ntitle" >
         </div>
         <div id="editorarea">
         <textarea  name="ncontent" id="ncontent" class="ncontent" rows="15" placeholder="" style="width: 700px;height:200px;overflow:auto;" ></textarea>
         </div>
         <p></p>
         <a class="closenote" href="#" target="_blank" >查看完整版笔记</a>
         <button class="notesubmit"  id="notesubmit">保存</button>
         <button class="notebtn pull-right closenote" style="margin:20px 0" >关闭</button>
      </div>
   </div>
</div>


<div id="toolbar" style="display: none;">
   <div class="tool app">
      <a href="#" target="_blank" class="tool-inner">
      <div class="tool-icon"></div>
      <div>App下载</div>
      </a>
      <div class="tool-popover">
         <div class="tool-popover-inner">
         <div class="img"><img src="//7n.w3cschool.cn/statics/images/w3c/app-qrcode2.png" alt="App下载" width="140" height="140"></div>
         <p>扫描二维码</p>
         <p>下载编程狮App</p>
         </div>
      </div>
   </div>
   <div class="tool wechat">
      <div class="tool-inner">
      <div class="tool-icon"></div>
      <div>公众号</div>
      </div>
      <div class="tool-popover">
         <div class="tool-popover-inner">
         <div class="img"><img src="//7n.w3cschool.cn/statics/images/w3c/mp-qrcode.png" alt="微信公众号" width="140" height="140"></div>
         <p>编程狮公众号</p>
         </div>
      </div>
   </div>
   <div class="tool feedback" data-module="page" onclick="showDialogBox(this)">
      <div class="tool-inner">
         <div class="tool-icon"></div>
         <div>意见反馈</div>
      </div>
   </div>
   <div class="tool service">
      <a href="#" target="_blank">
         <div class="tool-inner">
            <div class="tool-icon"></div>
            <div>帮助中心</div>
         </div>
      </a>
   </div>
   <div class="tool backtop" data-visibility="50">
      <div class="tool-inner">
         <div class="tool-icon"></div>
         <div>返回顶部</div>
      </div>
   </div>
</div>
</body>
</html>